<template>
    <Layout class-prefix="layout">
        <NumberPad :value.sync="record.amount" @submit="saveRecord"/>

        <Tabs   :data-source = 'recordTypeList'
                :value.sync="record.type" />
        <FormItem :value.sync = 'record.notes'
               fieldName="备注"
               placeholder="请输入备注"
        />
        <DatePicker :value.sync="record.date"/>

        <Tags :class="{warning:!isNull}" :value.sync="record.tags" :clearData.sync="clearData"/>
    <!--:value.sync="record.tags"-->
    </Layout>
</template>

<script lang="ts">
    import NumberPad from '@/components/Money/NumberPad.vue';
    import FormItem from '@/components/Money/FormItem.vue';
    import Tags from '@/components/Money/Tags.vue';
    import DatePicker from '@/components/Money/DatePicker.vue'
    import Tabs from '@/components/Tabs.vue'
    import Vue from 'vue'
    import {Component} from 'vue-property-decorator'

    import store from '@/store/index2.ts'

    import recordTypeList from '@/constants/recordTypeList.ts'


    @Component({
        components: {Tags, FormItem, NumberPad,DatePicker,Tabs},
        computed:{

        }
    })
    export default class Money extends Vue{

        tags = store.tagList
        recordTypeList = recordTypeList
        clearData= false
        isNull = true

        get recordList(){
            return this.$store.state.recordList;
        }
        // eslint-disable-next-line no-undef
        record: RecordItem = {
            tags:[],
            notes:'',
            type:'-',
            date: new Date().toLocaleDateString('zh-CN'),
            amount: 0,
        }

        saveRecord(){
            if(this.record.tags.length===0){
                this.isNull = false
                setTimeout(()=>{
                    this.isNull = true
                },5000)
                return alert('至少选中一个标签')

            }
            this.$store.commit('createRecords',this.record)
            this.record.tags = []
            this.record.notes = ''
            this.clearData = true



        }
        onUpdateNotes(value:string){
            this.record.notes = value
        }

       created() {
            this.$store.commit('fetchRecords')

       }

    }

</script>

<style lang="scss" scoped>
    ::v-deep .layout-content {
        display: flex;
        flex-direction: column-reverse;
        align-content: flex-end;
    }
    ::v-deep .notes{
        padding: 12px 0;
    }
    .warning{
        animation: flash 1s infinite;

    }
    @keyframes flash {
        0%{
            background: red;
        }
        100%{
            background: white;
        }
    }
</style>